<html> 
  <head> 
    <title>html shader</title> 
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="../math/point2d.js"></script>
    <script type="text/javascript" src="../math/vector2d.js"></script>
    <script type="text/javascript" src="../util/map.js"></script>
    <script type="text/javascript" src="../math/glMatrix.js"></script>
    <script type="text/javascript" src="../draw/renderer.js"></script>
    <script type="text/javascript" src="../draw/shader.js"></script>
    <script id="shader-fs" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision highp float;
        #endif
        
        void main(void) {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
    </script>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 Pos;
        uniform mat4 uWM;
        uniform mat4 uVPM;
        void main(void) {
            gl_Position = uVPM * uWM * vec4(Pos, 1.0);
        }
    </script>
    <script type="text/javascript">
        var renderer;
        var shader;
        var buffer;
        var gl;
        var wM;
        
        function onTimer() {
            renderer.beginScene();
            renderer.setShader( shader);
            renderer.setVertexBuffer( buffer, shader.Pos);
            renderer.uniformMatrix( shader.uWM, wM);
            renderer.uniformViewProjMatrix( shader.uVPM);
            //gl.uniformMatrix4fv( shader.uWVM, false, wM);
            gl.drawArrays( gl.TRIANGLES, 0, buffer.items);
    	}
    	
     	$(document).ready( function() {
     	    var canvas = $("#myCanvas")[0];
    		if ( !canvas || !canvas.getContext)
    			return;
    	    
    	    renderer = new Renderer();
    	    if ( renderer.init( canvas))
    	        return;
    	    gl = mix.gl;
    	    shader = mix.shaderMgr.set( mix.gl, 1, $.text( $("#shader-vs")), $.text( $("#shader-fs")));
    	    if ( !shader)
    	        return;
    	    shader.attrib( mix.gl, "Pos");
    	    shader.uniform( mix.gl, "uWM");
    	    shader.uniform( mix.gl, "uVPM");
    	    //shader.uniform( mix.gl, "uPM");
    	    
    	    var ar = [
    	        0,     200,      0,
    	        -100,  0,        0,
    	        100,   0,        0
    	    ];
    	    var br = [
             0.0,  1.0,  0.0,
            -1.0, -1.0,  0.0,
             1.0, -1.0,  0.0
            ];
    	    buffer = renderer.createBuffer( ar, 3);
    	    
    	        
    		wM = mat4.create();
    		mat4.identity( wM);
    		//mat4.translate( wM, [0.0, 0.0, -7.0]);
    		mat4.translate( wM, [400, -300, 0]);
    		//setInterval( "onTimer()", 33);
    		onTimer();
    		
    	});
		</script> 
  </head> 
  <body> 
    <canvas id="myCanvas" width="800" height="600">
    	Your browser does not have support for Canvas.
    </canvas>
  </body> 
</html> 